<template>
    <div class="home w">
        <div class="guanggao"> 
            <img src="../assets/imgs/guanggao.png" alt="">
        </div>
        <div class="content">
        <!-- 精品推荐 -->
        <div class="title">
            <img src="../assets/imgs/tuijian.png" alt="">
            <h2>精品推荐</h2>
        </div>
            <List :list="jingpingrecommonderList" @fn="handleList"></List>
        <!-- 热门兑换 -->
        
        <div class="title">
            <img src="../assets/imgs/remen.png" alt="">
            <h2>热门兑换</h2>
        </div>

        <img display="block" :style="{marginBottom:'20px'}" src="@/assets/imgs/hotDui.png" alt="">

        <List :list="hotrecList"> </List>
        <!-- 积分攻略 -->

        <div class="title">
            <img src="../assets/imgs/gonglue.png" alt="">
            <h2>积分攻略</h2>
        </div>
        <JFIntroduce></JFIntroduce> 
        </div>
    </div>
</template>

<script lang='ts' setup>
import { ref } from "vue"
import List from "@/components/home/List.vue";
import JFIntroduce from "@/components/home/JFIntroduce.vue"

// 精品推荐
let jingpingrecommonderList = ref([0,1,2,3,4,5])
const handleList = (val?:number | string |boolean)=>{
    console.log(val);
    
    jingpingrecommonderList.value = [0,1,2,3]
}


// 热门兑换
let hotrecList = ref([1,2,3,4,5,6,7,8])


// 
</script>

<style lang = "less" scoped>
    .w{
        width: 1200px;
        margin: 0 auto;
    }
    .home{
        .guanggao{
            margin-bottom: 10px;
        }
        .content{
            background-color: #f5f5f5;
        }
    }
    .title{
        img{
            display: block;
            height:40px;
            width: 40px;
            margin-right: 10px;
        }
        display: flex;
        align-items: center;
    }
</style>